Dreamweaver Tutorial Part 8

In the so called "box model" of XHTML all block-level elements have a virtual box drawn around them. This virtual box is invisible in the browser, but Dreamweaver displays the box in its Split and Design windows. The virtual box may contain a border, padding,and a margin all of which are visable. Click here for an illustration of borders

The next section on the size of XHTML elements will use backgrounds, so first, click here for a page on Backgrounds

CSS permits the page designer to control the size and placement of each XHTML element. This text goes in a box with a #aaccff (blue) background, which is set to use 40% of the screen width. Notice that 40% of the Dreamweaver screen is not the same absolute width as 40% of the full browser screen. Please note that this page uses the inline style in this element to set the width of this box and the external style sheet relstyle.css to set the rest of the properties. This is why external style sheets are the way to go!

This box has width 20% and has fixed height of 60px, so it is set to scroll when there is too much text, which is not the case here. Type in some more stuff to see what happens!